﻿label.radio.button {
    display: flex;
}

label.radio.button {
    outline: none;
    display: inline-flex;
    align-items: center;

    input[type=radio] {
        position: absolute;
        left: 0;
        opacity: 0;
        outline: none;
        z-index: -1;
    }
}


.buttons.has-addons.are-vertical {
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .button {
        display: block;
        width: 100%;
        border-radius: 0;
    }

    .button:not(:last-child) {
        margin: -1px;
    }
}

.field-body {
    .switch[type="checkbox"] {
        + label {
            margin-top: .375em;
        }
    }
}

.field-body {
    .slider[type="range"] {
        width: 100%;
    }
}

// When file is placed inside of "field-body" it will not be fullwidth. With this we force it to work as expected.
.file.has-name.is-fullwidth {
    width: 100%;
}

.has-addons.is-extra-small > .control > .button,
.has-addons.is-extra-small > .control > .control > .button,
.has-addons.is-extra-small > .control > .field > .control > .input,
.has-addons.is-extra-small > .control > .field > .control > .select,
.input.is-extra-small {
    font-size: $size-extra-small;
}

.has-addons.is-small > .control > .button,
.has-addons.is-small > .control > .control > .button,
.has-addons.is-small > .control > .field > .control > .input,
.has-addons.is-small > .control > .field > .control > .select {
    font-size: $size-small;
}

.has-addons.is-medium > .control > .button,
.has-addons.is-medium > .control > .control > .button,
.has-addons.is-medium > .control > .field > .control > .input,
.has-addons.is-medium > .control > .field > .control > .select {
    font-size: $size-medium;
}

.has-addons.is-large > .control > .button,
.has-addons.is-large > .control > .control > .button,
.has-addons.is-large > .control > .field > .control > .input,
.has-addons.is-large > .control > .field > .control > .select {
    font-size: $size-large;
}

.has-addons.is-extra-large > .control > .button,
.has-addons.is-extra-large > .control > .control > .button,
.has-addons.is-extra-large > .control > .field > .control > .input,
.has-addons.is-extra-large > .control > .field > .control > .select,
.input.is-extra-large {
    font-size: $size-extra-large;
}

.select.is-extra-small {
    font-size: $size-extra-small;
}

.select.is-extra-large {
    font-size: $size-extra-large;
}

.textarea.is-extra-small {
    font-size: $size-extra-small;
}

.textarea.is-extra-large {
    font-size: $size-extra-large;
}

.textarea.is-static {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

select[readonly] {
    pointer-events: none;

    option,
    optgroup {
        display: none;
    }
}

.focus-trap {
    display: contents;
}

.field-label-required:after {
    content: " *";
    color: var(--b-theme-danger, $danger);
}